<!-- 调用示例：
<pb-address-select-popup ref="addressSelectPopup" :active="0" :getAddressData="getAddressData" @addAddressPage="addAddressPage" @confirm="confirm"></pb-address-select-popup>
//展示组件
this.$refs.addressSelectPopup.show = true

//获取地址列表
async getAddressData() {
	let res = {
	 	"code":200,
	 	"data":[]
	}
	//接口调用获取地址列表
	await xxxxx(url).then(data => {
		res.code = 200
		res.data = [{
	 		"name":"张三",
	 		"phoneNo":"",
	 		"fullAddress":""
	 	}]
	}).catch(() => {
		res.code = -1
		res.data = []
	})
	
	return res
},

//添加地址
addAddressPage() {
	uni.navigateTo({
		url: 'xxxx/xxxx'
	})
}

confirm(selectItem,activeIndex) {
	console.log(`selectItem=>${JSON.stringify(selectItem)}  activeIndex=>${activeIndex}`)
} -->


<template>
	<view>
		<pb-popup ref="pbPopup" round="10" mode="bottom" contentMaxHeight="60vh" @close="close" @open="open">
			<template #header>
				<view class="pb-flex-row pb-main-between title-btn">
					<view class="cancel-btn" @click="cancelSelect">
						取消
					</view>
					<view class="title">
						选择地址
					</view>
					<view class="confirm-btn" @click="confirmSelect">
						确定
					</view>
				</view>
				<view class="pb-flex-column add-btn">
					<text @click="handleAdd">添加家庭地址</text>
				</view>
			</template>
			<view class="patient-switch">
				<view class="patient-wrap">
					<view class="patient-list">
						<view v-for="(item,index) in list" :key="index"
							class="patient-item pb-flex-row pb-main-between"
							:class="{'selected': index === activeIndex}" @click="itemClick(item,index)">
							<view class="pb-flex-column pb-main-center">
								<view class="text-content" style="font-weight: bold;">
									{{ item.fullAddress | formatEmpty }}
								</view>
								<view class="text-label">
									{{ item.name | formatEmpty }}｜{{ item.phoneNo | formatEmpty }}
								</view>
							</view>
							<u-icon v-if="activeIndex == index" name="checkmark" color="#48B5EF" size="40rpx"></u-icon>
						</view>
					</view>
				</view>

			</view>
		</pb-popup>
	</view>
</template>

<script>
	export default {
		name: "pb-address-select-popup",

		props: {
			active: {
				type: Number,
				default: null
			},
			getAddressData: {
				type: Function,
			},
		},

		data() {
			return {
				show: false,
				activeIndex: null,
				selectItem: null,
				list: []
			};
		},
		watch: {
			active(newV) {
				if (!newV) {
					this.activeIndex = null
					this.selectItem = null
				}
			},
			show(e) {
				this.$refs.pbPopup.show = e
			}
		},
		methods: {
			open() {
				uni.$off('UpdateAddress')
				uni.$on('UpdateAddress', data => {
					this.getList()
				})
				this.getList()
				this.show = true
			},
			close() {
				uni.$off('UpdateAddress')
				this.show = false
			},
			async getList() {
				if (this.getAddressData && typeof(this.getAddressData) === 'function') {
					var res = await this.getAddressData.call(uni.$u.$parent.call(this))
					// {
					// 	"code":200,
					// 	"data":[{
					// 		"name":"张三",
					// 		"phoneNo":"",
					// 		"fullAddress":""
					// 	}]
					// }
					if (res.code == 0 || res.code == 200) {
						this.list = res.data
						if (this.list && this.list.length > 0 && this.selectItem == null) {
							if (this.active && this.active < this.list.length) {
								this.activeIndex = this.active
								this.selectItem = this.list[this.active]
							} else {
								this.activeIndex = 0
								this.selectItem = this.list[0]
							}
						}
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '父组件请实现 getAddressData 方法，以便获取地址信息'
					})
				}
			},
			itemClick(e, index) {
				this.activeIndex = index
				this.selectItem = e
			},
			cancelSelect() {
				this.close()
			},
			confirmSelect() {
				console.log('【pb-address-select-popup】confirmSelect=>' + this.activeIndex)
				if (this.selectItem) {
					this.$emit('confirm', this.selectItem, this.activeIndex)
					this.show = false
				} else {
					uni.showToast({
						icon: 'none',
						title: '请选择地址'
					})
				}

			},
			handleAdd() {
				this.$emit('addAddressPage')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title-btn {
		padding: 30rpx 32rpx;
		font-size: 32rpx;
		font-weight: 600;
		border-bottom: 1rpx solid #E5E6EB;

		.cancel-btn {
			color: #4D5566;
		}

		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #1F2228;
		}

		.confirm-btn {
			color: $uni-color-primary;
		}
	}

	.add-btn {
		margin: 30rpx;
		padding: 20rpx;
		text-align: center;
		font-size: 32rpx;
		border-radius: 8rpx;
		background-color: #F7F8FA;
		color: $uni-color-primary;
	}

	.patient-switch {
		.patient-wrap {
			max-height: 100%;
			overflow: auto;
		}

		.patient-list {
			padding: 0 32rpx 32rpx 32rpx;

			.patient-item {
				margin-top: 32rpx;
				padding: 20rpx 32rpx;
				border-radius: 8rpx;
				background-color: #F7F8FA;

			}

			.selected {
				border: 1rpx solid $uni-color-primary;
				background-color: #E7F9F4;
			}
		}
	}
</style>